<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta name="author" content="路志莹">
        <title>评分</title>
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css">
        <style>
        /*初始状态*/
            .bg{
                font-size: 50px;
                color: lightgrey;
            }
            /*整数点亮*/
            .list{
                font-size: 50px;
                color: yellow;
            }
        </style>
    </head>
    <body>
           <div id="app">
              
               评分:<input type="text" v-model='num'>
               <!--<star :value='num' @input='change'></star>
               -->
               <star v-model='num'></star>
           </div>
    <script src="js/vue.js">
     
    </script>
    <script type="text/html" id="star">
    <div>
         <span  aria-hidden="true" 
         v-for=' i in 5' 
         :class="{glyphicon:true ,'glyphicon-star':true, bg:
         true,list:(i-value)<=0} "
         @click='btnHandle' :data-id='i' :style='(i-value)>0&&(i-value)<1?show(value):"" '></span> 
         <p>评分为{{value}}</p>
    </div>
    </script>

    <script>
    // 组件
    Vue.component('star',{
        template:'#star',
        props:['value'],
        data:function(){
            return{
                list:true,
                bg:true,
                glyphicon:true,
               'glyphicon-star':true
            }
        },
        methods:{
            btnHandle(e){
                var tag=e.currentTarget
                var id=tag.dataset['id']
                if(id>this.value){
                   tag.classList.remove('bg')
                   tag.classList.add('list')
                //    发射 点亮星星
                   this.$emit('input',id)
                }
                else{
                     tag.classList.remove('list')
                     tag.classList.add('bg')
                    //  发射  点暗星星
                     this.$emit('input',(id-1))
                     
                }
            },
            // 渐变
            show(e){
                var num=Math.floor(e)
                var parent=(e-num)*100+'%'
                var obj={
                    gen:{
                         'font-size': 50+'px',
                        background:'linear-gradient(to right ,yellow, yellow '+parent+', lightgrey,lightgrey '+parent+')',
                       '-webkit-background-clip':'text',
                        color:'transparent',
                    }
                    
                }
                // console.log(obj.gen)
               return obj.gen
                
            }
           
        },
        
    })
    var app=new Vue({
        el:'#app',
        data:{
            num:3.5
        },
        methods:{
            change(e){
                // console.log(e)
                this.num=e
            }
        }
    })
    </script>
    </body>
</html>